<template>
	<view class="content">
	  <view class="uni-list">
	    <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in news"
		 :key="index" @click="openinfo" :data-newsid="item.post_id">
	      <view class="uni-media-list">
	        <image class="uni-media-list-logo" :src="item.author_avatar"></image>
	        <view class="uni-media-list-body">
	          <view class="uni-media-list-text-top">{{item.title}}</view>
	          <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      news: [] 
	    }
	  },
	  onLoad: function () {
	    uni.showLoading({
	      title: "加载中...."
	    })
	    uni.request({
	      url: 'https://unidemo.dcloud.net.cn/api/news',
	      method: 'GET',
	      data: {},
	      success: res => {
	        this.news = res.data;  
	        uni.hideLoading();
	      },
	      fail: () => {},
	      complete: () => {}
	    });
	  },
	  methods: {
	    openinfo(e) {
	      console.log(e);
	      var newsid = e.currentTarget.dataset.newsid;
	      uni.navigateTo({
	        url: '../detail/detail?newsid=' + newsid
	      });
	    }
	  }
	}

</script>

<style>
    .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} 
	.uni-media-list-body{
		height: auto;
	}
	.uni-media-list-text-top{
		line-height:1.6em;
	}
</style>
